<template>
  <div>
    <div class="contianer-box">
      <div class="listBox">
        <div style="width:100%;float: right">
         <!-- <span style="float: left;cursor: pointer;" @click="$router.push('/')">首页</span>-->
          <ul v-for="(items,index) in selectList.slice(0,4)" style="cursor: pointer;" :key="index">
            <li style="display: flex;align-items: center;padding: 0 20px;" @click="handleChoose(items,index)" :class="{choose:choose===index}">
              {{items.value}}
<!--              <img src="../../../static/img/dh_xl.png" alt="" v-if="index!==0">-->
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style=" background:#F4F4F4;" v-if="false&&['findshop','details'].includes($route.name)">
      <div class="finds-list" >
        <ul>
          <li v-for="(item,index) in findsList" :key="index" @click="handleClick(index)" :class="{active:active===index}">{{item}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "navList",
    data() {
      return {
        bannerlist: ["py_bg.jpg", "sy_banner.jpg"],
        selectList: [
          {
            value: "首页",
            label: "首页",
            route:'/'
          },
          {
            value: "商铺出租",
            label: "商铺出租",
            route:'/shangpu'
          },
          {
            value: "商铺租赁",
            label: "商铺租赁",
            route:'/findshop'
          },
          {
            value: "我们的服务",
            label: "我们的服务",
            route:'/service'
          },
          {
            value: "餐饮",
            label: "餐饮",
            route:'/findshop'
          }, {
            value: "生活服务",
            label: "生活服务",
            route:'/findshop'
          }, {
            value: "医药保健",
            label: "医药保健",
            route:'/findshop'
          }, {
            value: "休闲娱乐",
            label: "休闲娱乐",
            route:'/findshop'
          }, {
            value: "美容美发",
            label: "美容美发",
            route:'/findshop'
          }, {
            value: "家具建材",
            label: "家具建材",
            route:'/findshop'
          }, {
            value: "专柜网店",
            label: "专柜网店",
            route:'/findshop'
          }, {
            value: "超市便利",
            label: "超市便利",
            route:'/findshop'
          }, {
            value: "服饰鞋包",
            label: "服饰鞋包",
            route:'/findshop'
          }, {
            value: "汽修美容",
            label: "汽修美容",
            route:'/findshop'
          }, {
            value: "酒店",
            label: "酒店",
            route:'/findshop'
          }, {
            value: "教育培训",
            label: "教育培训",
            route:'/findshop'
          }, {
            value: "电子通讯",
            label: "电子通讯",
            route:'/findshop'
          }, {
            value: "其他行业",
            label: "其他行业",
            route:'/findshop'
          }
        ],
        findsList: [
          '西餐','中餐', '堂食', '快餐小吃', '面食', '甜品', '水果', '冷饮', '咖啡', '茶艺'
        ],
        active:0,
        choose:null
      };
    },
    methods:{
      handleClick(index){
        this.active =index
      },
      handleChoose(item,index){
        this.choose =index
        this.$router.push(item.route||'/')
      }
    }
  }
</script>

<style scoped lang="less">
  .contianer-box {
    height: 40px;
    line-height: 40px;

    //background:rgba(228, 30, 29, 1);
    background: #fff;
    .listBox {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      font-size: 15px;
      font-weight: 400;
      color: #333;
      margin-bottom: 5px;
      ul li {
        float: left;
      }
    }
  }

  .finds-list {
    width: 1200px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(200, 6, 5, 1);
    margin: 0 auto;
    display: flex;
    align-items: center;
    ul {
      display: flex;

      li {
        font-size: 14px;
        line-height: 14px;
        font-weight: 400;
        color: #333;
        padding: 0 20px;
        display: flex;
        align-items: center;
        cursor: pointer;

        &:not(:nth-last-of-type(1)):after {
          content: '';
          width: 1px;
          height: 8px;
          background: rgba(153, 153, 153, 1);
          margin-left: 10px;
        }
      }
    }
    .active{
      color: #C80605;
    }
  }
  .choose{
    //background-color:#CE0807;
    color: #e41e1d;
    border-bottom: 2px solid #e41e1d;
  }
</style>
